<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>分栏布局</h2>
    <style>
        ul {
            columns: 2;
        }
    </style>
    <ul>
        <li>重庆市</li>
        <li>哈尔滨市</li>
        <li>长春市</li>
        <li>兰州市</li>
        <li>北京市</li>
        <li>杭州市</li>
        <li>长沙市</li>
        <li>沈阳市</li>
        <li>成都市</li>
        <li>合肥市</li>
        <li>天津市</li>
        <li>西安市</li>
    </ul>

    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
           justify-content: space-between;
        }

        .list {
            width: 24%;
            height: 100px;
            background-color: skyblue;
            margin-top: 5px;
        }

        /* .list:not(:nth-child(4n)) {
            margin-right: calc(4% / 3);
        } */

        .list:last-child:nth-child(4n - 1) {
            margin-right: calc(24% + 4% / 3);
        }

        .list:last-child:nth-child(4n - 2) {
            margin-right:   calc(48% + 8% / 3);
        }
    </style>


    <div class="container">
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
    </div>


</body>

</html>